<!--
 * @Author: Lakeiedward
 * @Date: 2022-01-09 20:30:15
 * @LastEditTime: 2022-01-09 20:39:50
 * @FilePath: \echarts\src\views\world\drag.vue
-->
<template>
  <div>
    <draggable tag="ul" :list="list" @change="log">
      <li
        class="list-group-item"
        v-for="(item, index) in list"
        :key="item.name"
      >
        <i class="fa fa-align-justify handle"></i>
        <span class="text">{{ item.name }} </span>
        <input type="text" class="form-control" v-model="item.text" />
        <i class="fa fa-times close" @click="remove(index)"></i>
      </li>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  props: {},
  data() {
    return {
      list: [
        { name: "cccc", id: 1 },
        { name: "cccc", id: 1 },
        { name: "bbb", id: 2 },
        { name: "bbb", id: 2 },
      ],
    };
  },
  watch: {},
  mounted() {
  },
  components: {
    draggable,
  },
};
</script>
<style scoped lang="scss"></style>
